<template>
  <el-card>
    <div slot="header">
      <h3>查看售价价格组调整信息</h3>
    </div>
    <div class="pg_body_wrap">
      <el-row class="item_wrap" v-if="newGroupList.length > 0">
        <h4>现价格组及比例</h4>
        <el-table
          :data="newGroupList"
          :header-cell-style="{ textAlign: 'center' }"
          border="border"
          use-virtual
        >
          <el-table-column
            v-for="column in xianPGCol"
            :key="column.key"
            :prop="column.key"
            :label="column.title"
            :property="column.key"
            :align="column.align"
            :min-width="column.width || 120"
          />
        </el-table>
      </el-row>
      <el-row class="item_wrap" v-if="singleTableData.length > 0">
        <el-divider content-position="center"><i class="el-icon-price-tag"></i>单计量列表</el-divider>
        <el-row type="flex" justify="end">
          <el-button type="text" :loading="btnLoading.singleExport" @click="handleExportTemplate('single')">模板导出</el-button>
        </el-row>
        <SkusTable
          :data-source="singleTableData"
          :columns="singleTableColumns"
          :maxTableHeight="480"
        />
      </el-row>
      <el-row class="item_wrap" v-if="multipleTableData.length > 0">
        <el-divider content-position="center"><i class="el-icon-price-tag"></i>多计量列表</el-divider>
        <el-row type="flex" justify="end">
          <el-button type="text" :loading="btnLoading.multipleExport" @click="handleExportTemplate('multiple')">模板导出</el-button>
        </el-row>
        <SkusTable
          :data-source="multipleTableData"
          :columns="multipleTableColumns"
          :maxTableHeight="480"
        />
      </el-row>
      <FooterFields :footerFields="footerFields" />
    </div>
    <!-- 查看价格组 -->
    <view-original-price-group-dialog
      :visible.sync="viewPG.visible"
      :columns="viewPG.columns"
      :originalParams="viewPG.params"
    />
  </el-card>
</template>

<script>
import { ApiRequest } from '@api/basePage';
import SkusTable from '@/pages/commodity/modules/components/saleSkusTable';
import ViewOriginalPriceGroupDialog from '@/components/common/dialog/priceGroupSetDialog/viewOriginalPriceGroupDialog';
import {
  getSinglePriceGroupColumnsFn,
  getMultiplePriceGroupColumnsFn
} from '@/pages/commodity/modules/constants/salePriceGroupModule/viewModule';
import { exportSaleTemplateService } from '@/api/finance/common/salePrice';
import { generateUuid, createExcelByExport } from '@/utils/bizUtils';
import FooterFields from '@/pages/commodity/components/FooterFields';

export default {
  components: { SkusTable, ViewOriginalPriceGroupDialog, FooterFields },
  data () {
    return {
      priceGroupColumns: [
        {
          title: '组名称',
          key: 'groupName',
          align: 'center'
        },
        {
          title: '城市',
          key: 'mainCity',
          align: 'center'
        },
        {
          title: '参照组',
          key: 'mainGroupName',
          align: 'center'
        },
        {
          title: '价格比例',
          key: 'rate',
          align: 'center'
        },
        {
          title: '包含城市',
          key: 'provinceNameList',
          align: 'left',
          width: 300,
          tooltip: 'noTooltip'
        }
      ],
      /* 查看价格组组件数据 */
      viewPG: {
        params: {},
        visible: false,
        columns: []
      },
      singleTableData: [],
      singleTableColumns: [], // 单计量表格columns
      multipleTableData: [],
      multipleTableColumns: [], // 多计量表格columns
      xianPGCol: [],
      newGroupList: [],
      oldGroupMap: [],
      footerFields: {},
      btnLoading: {
        singleExport: false,
        multipleExport: false
      }
    };
  },
  created () {
    let recordNo = this.$route.query.recordNo;
    this.getAllColumnsFn();
    this.getDataAction(recordNo);
  },
  methods: {
    // 模板导出
    handleExportTemplate (type) {
      this.exportSalePriceData(type);
    },
    // 导出售价信息
    async exportSalePriceData (type) {
      const unitByTypes = {
        'single': { unitType: '2', label: '单计量' },
        'multiple': { unitType: '1', label: '多计量' }
      }
      const isSaleMultiUnit = unitByTypes[type].unitType;
      const uuid = generateUuid();
      const data = {
        uuid,
        isSaleMultiUnit,
        tableData: this[`${type}TableData`]
      }
      const res = await exportSaleTemplateService(data, state => { this.btnLoading[`${type}Export`] = state; });
      createExcelByExport({ res, excelTitle: `价格组${unitByTypes[type].label}模板_${uuid}` });
    },
    getAllColumnsFn () {
      this.singleTableColumns = _.cloneDeep(
        getSinglePriceGroupColumnsFn({
          handleViewOriginalPriceGroup: this.viewOriginalPGFn
        })
      );
      this.multipleTableColumns = _.cloneDeep(
        getMultiplePriceGroupColumnsFn({
          handleViewOriginalPriceGroup: this.viewOriginalPGFn
        })
      );
      this.xianPGCol = _.cloneDeep(this.priceGroupColumns);
      this.viewPG.columns = _.cloneDeep(this.priceGroupColumns);
    },
    /* 查看原价格组 */
    viewOriginalPGFn (row) {
      if (row.oldGroupList == null) {
        this.$Message.info('无原价格组信息');
      } else {
        let dataSource = row.oldGroupList.reduce((value, item) => {
          value.push({
            groupName: item.groupName,
            mainCity: item.mainCity,
            mainGroupName: item.mainGroupName,
            rate: item.rate,
            provinceNameList: item.provinceNameList && item.provinceNameList.join(',')
          })
          return value;
        }, []);
        this.viewPG.params = { dataSource };
        this.viewPG.visible = true;
      }
    },
    /* 获取数据源 */
    getDataAction (recordNo) {
      let data = {};
      let loading = this.$loading({ target: '.pg_body_wrap' })
      ApiRequest(
        `/sysback/salepricegrouptemp/getByBillUuid4FormDetail?billUuid=${recordNo}`,
        'post',
        data,
        false
      ).then(res => {
        loading.close();
        if (res.retStatus !== '1' || !res.retData) { return false }
        const { t } = res.retData;
        this.footerFields = res.retData
        if (!t) { return false }
        this.singleTableData = t.upInputList || [];
        this.multipleTableData = t.upSteelInputList || [];
        this.newGroupList = t.newGroupList && t.newGroupList.reduce((value, item) => {
          value.push({
            uuid: item.uuid,
            groupName: item.groupName,
            mainProvince: item.mainProvince,
            mainProvinceCode: item.mainProvinceCode,
            mainCity: item.mainCity,
            mainCityCode: item.mainCityCode,
            mainAreaCode: item.mainAreaCode,
            mainArea: item.mainArea,
            mainGroupName: item.mainGroupName,
            mainGroupUuid: item.mainGroupUuid,
            rate: item.rate,
            canMain: item.canMain,
            productUuid: item.productUuid,
            provinceNameList: item.provinceNameList.join(',')
          })
          return value;
        }, []);
      }).catch(() => {
        loading.close();
      })
    }
  }
};
</script>

<style lang="less" scoped>
.item_wrap {
  margin-top: 20px;
}
</style>
